<template>
  <div style="margin-top: 20px;margin-left: 20px;width: 1300px;">
    <div style="display: block;">
      <el-button style="width: 200px" @click="addNews">发布</el-button>
      <el-button style="width: 200px">清空</el-button>
    </div>
    <div id="div1">


    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import E from 'wangeditor'
import {ElMessage} from "element-plus";

let editor;
export default {
  name: "book",
  data() {
    return {
      News: {
        id:"",
        title: "",
        content: "",
        author: "",
        time : ""
      }
    }
  },
  // 这个钩子函数，会在页面渲染完成之后执行
  mounted() {
    // 创建富文本编辑器对象
    // 其他富文本：https://blog.csdn.net/davidhzq/article/details/100842866
    editor = new E('#div1')
    editor.config.height = 640

    editor.config.uploadImgServer="http://localhost:8081/files/editor/upload"

    //设置图片文件上传时，使用的参数名，如果不设置，后端无法接收到这个参数
    editor.config.uploadFileName="file"
    editor.create()
  },
  methods: {
    //提示栏函数
    open(massage, type) {

      if (type) {
        ElMessage({
          message: massage,
          type: type,
        })
      } else {
        ElMessage.error(massage)
        /**
         * this.$nextTick(()=>{//将回调延迟到下一次DOM跟新之后
         * this.$refs['upload'].clearFiles()//清除文件上传列表
         * })
         */
      }
    },
    addNews() {
      this.News.author = (JSON.parse(window.sessionStorage.getItem("user"))).username;
      this.News.content = editor.txt.html()
      request.post("/boot/news",this.News).then(msg=>{
          this.open("添加成功","success")
      })


      //更多富文本配置：https://www.wangeditor.com/doc/pages/07-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/01-%E9%85%8D%E7%BD%AE%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A5%E5%8F%A3.html
    }
  }
}
</script>

<style scoped>

</style>